<template>
  <div class="app-container">
    <!-- 条件过滤区 -->
    <div class="filter-container">
      <div class="filter-row">
        <div class="filter-item">
          <span class="filter-title">日期选择：</span>
          <!-- <el-date-picker
            size="small"
            :range-separator="null"
            start-placeholder="请选择时间"
            class="search-item date-range-item"
            format="yyyy-MM-dd"
            type="datetimerange"
            v-model="searchObj.timeRange"
            value-format="yyyy-MM-dd"
          /> -->
          <el-date-picker
            size="small"
            class="search-item date-range-item"
            v-model="searchObj.timeRange"
            type="datetimerange"
            format="yyyy-MM-dd  HH:mm:ss"
            value-format="yyyy-MM-dd HH:mm:ss"
            :range-separator="null"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div class="filter-item">
          <el-button size="small" @click="search" class="" type="primary">
            查询
          </el-button>
          <el-button size="small" @click="reset" class="">
            重置
          </el-button>
          <el-button size="small" @click="exportExcel" class="filter-item" plain type="primary">
            导出
          </el-button>
        </div>
      </div>
    </div>
    <!-- tab区 -->
    <div class="tabs-filter-container">
      <el-radio-group size="small" v-model="searchObj.areaPosition" @change="search">
        <el-radio-button label="province">全省统计</el-radio-button>
        <el-radio-button label="city">市州统计</el-radio-button>
        <el-radio-button label="district">区县统计</el-radio-button>
      </el-radio-group>
    </div>
    <el-table
      size="medium"
      :data="tabItems"
      ref="table"
      style="width: 100%;"
      v-loading="tabLoading"
    >
       <el-table-column label="区域" align="center"
        prop="test1"
      />
       <el-table-column label="累计申领机构数" align="center"
        prop="test2"
      />
      <el-table-column label="累计申领场所码数" align="center"
        prop="test3"
      />
      <el-table-column label="累计扫码次数" align="center"
        prop="test4"
      />
      <el-table-column label="累计扫码人数" align="center"
        prop="test5"
      />
      <el-table-column label="累计扫码红色次数" align="center"
        prop="test6"
      />
      <el-table-column label="累计扫码红色人数" align="center"
        prop="test7"
      />
      <el-table-column label="累计扫码黄色次数" align="center"
        prop="test8"
      />
      <el-table-column label="累计扫码黄色人数" align="center"
        prop="test9"
      />
       <el-table-column label="日扫码次数" align="center"
        prop="test10"
      />
       <el-table-column label="日扫码人数" align="center"
        prop="test11"
      />
      <el-table-column label="日扫码红色人次" align="center"
        prop="test12"
      />
      <el-table-column label="日扫码红色人数" align="center"
        prop="test13"
      />
      <el-table-column label="日扫码黄色人次" align="center"
        prop="test14"
      />
       <el-table-column label="日扫码黄色人数" align="center"
        prop="test15"
      />
      />
    </el-table>
    <div class="pagination-box">
      <el-pagination
        :background="true"
        :current-page="pagination.currentPage"
        :page-size="pagination.pageSize"
        :page-count="pagination.pageCount"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import {reqUrl1} from '@/http/apiUrls.js';
export default {
  name: 'AreaReport',
  data() {
    return {
      tabLoading: false,
      tableKey: 0,
      pageItems: 10, // 每页查询条数
      pagination: {
        currentPage: 1, // 当前页
        pageSize: 10, // 每页显示条数
        pageCount: 1, // 总页数
      },
      tabItems: [{
        test1: '贵州省',
        test2: '31,540,000',
        test3: '31,540,000',
        test4: '31,540,000',
        test5: '31,540,000',
        test6: '31,540,000',
        test7: '31,540,000',
        test8: '31,540,000',
        test9: '31,540,000',
        test10: '27,842,656',
        test11: '27,842,656',
        test12: '42459',
        test13: '42459',
        test14: '42459',
        test15: '42459',
      }],
      searchObj: this.initSearchObj(),
    }
  },
  created(){
    // this.getData(1, this.pageItems, {} , {})
  },
  methods: {
    initSearchObj(){
      return {
        areaPosition: 'province',
        timeRange: [],
      }
    },
    getSearchObj(){
      let obj = this.searchObj;
      const ids = obj.areaIds;
      if(ids && ids.length > 0){
        obj.areaCode = ids[ids.length-1]
      }
      return obj;
    },
    getExtraObj(){
      let obj = this.searchObj;
      let extra = {};
      if(obj.timeRange && obj.timeRange.length == 2 ){
        extra.createTime_ge = obj.timeRange[0]
        extra.createTime_le = obj.timeRange[1]
      }
      return extra
    },
    search(){
      console.log(this.searchObj);
      this.getData(1, this.pageItems, this.getSearchObj(), this.getExtraObj())
    },
    reset(){
      this.searchObj = this.initSearchObj()
      // this.getData(1, this.pageItems, {}, {})
    },
    getData(current , size, model){
      let requestData = {
        current,
        size,
        model
      }
      this.tabLoading = true;
      this.$postJson(reqUrl1, requestData).then(res => {
        this.tabLoading = false;
        if(res){
          const pagination = {
            currentPage: parseInt(res.current), // 当前页面号
            pageSize: parseInt(res.size), // 每页条目数
            pageCount: parseInt(res.pages), // 总页面数
          }
          this.pagination = pagination;
          this.tabItems = res.records;
        }
      })
    },
    async handleSizeChange(val) {
      this.pageItems = val
      await this.getData(1, this.pageItems, this.getSearchObj(), this.getExtraObj())
    },
    async handleCurrentChange(val) {
      await this.getData(val, this.pageItems, this.getSearchObj(), this.getExtraObj())
    },
    itemDetail(item){
      console.log(item);
      // this.$router.push({
      //   path: "/eve/bus-user/detail",
      //   query: {id: item.id}
      // })
    },
    exportExcel() {
      // if (this.queryParams.timeRange) {
      //   this.queryParams.extra.createTime_st = this.queryParams.timeRange[0];
      //   this.queryParams.extra.createTime_ed = this.queryParams.timeRange[1];
      // }
      // this.queryParams.extra.fileName = '导出登录日志数据';
      // loginLogApi.export(this.queryParams).then(response => {
      //   downloadFile(response);
      // });
    },
  }
}
</script>
<style lang="scss" scoped>
.tabs-filter-container{
  margin-bottom: 10px;
}
.app-container {
  .filter-row {
    width: 100%;
    margin-bottom: 8px;
    display: flex;
    .filter-item {
      width: fit-content;
      .filter-title {
        display:inline-block;
        width:100px;
        text-align:right;
        margin-left: 4px;
      }
    }
  }
}
</style>